<template>
  <div class="waterfall-list-container" ref="waterfallList">
    <div class="waterfall-list-item" v-for="(item,index) in waterfallList" :key="index" :style="rande(item)"></div>
    <button @click="loadMore">加载更多</button>
  </div>
</template>

<script>

const suijicolour = ['#b4ffe3', '#66CDAA', '#acc2e6', '#d7b0d8', '#95abe6', '#ffc47b', '#b6d288', '#f49586', '#bcaf7a']
const wh = [{w: 4, h: 3}, {w: 3, h: 4}, {w: 16, h: 9}, {w: 8, h: 4},{w: 5, h: 5},{w: 2, h: 3},{w: 1, h: 2},{w: 5, h: 7},{w: 8, h: 6}]
export default {
  name: "waterfall-list",
  props: {
    dataSource: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      waterfallList: [],
      imageWidth: 200,
      waterfallImageCol: 5,
      waterfallImageRight: 20,
      waterfallImageBottom: 10,
      waterfallColHeight: [],
      imgList: [],
      colLeft: 0,
    }
  },
  watch: {
    // dataSource: {
    //   handler: function (val, oldVal) {
    //     this.waterfallList = this.dataSource.map(item => {
    //       return this.rankImage(item)
    //     })
    //   },
    //   deep: true,
    // }
  },
  mounted() {
    const fullWidth = this.$refs.waterfallList.offsetWidth
    fullWidth > 1500 ? this.imageWidth = 240 : this.imageWidth = 170
    let maxColNum = Math.floor(fullWidth / (this.imageWidth + this.waterfallImageRight))
    maxColNum === 0 ? maxColNum = 1 : null
    let contentWidth = (this.imageWidth + this.waterfallImageRight) * maxColNum
    if ((fullWidth - contentWidth) < (this.imageWidth * 0.8)) {
      maxColNum--;
      contentWidth = (this.imageWidth + this.waterfallImageRight) * maxColNum
    }
    this.waterfallImageCol = maxColNum
    this.colLeft = (fullWidth - contentWidth) / 2
    this.waterfallColHeight = new Array(maxColNum).fill(0)
    this.waterfallList = this.dataSource.map(item => {
      return this.rankImage(item)
    })
  },
  methods: {
    rankImage(imageData) {
      let image = {
        ...imageData
      }
      let {
        imageWidth,
        waterfallImageRight,
        waterfallImageBottom,
        waterfallColHeight,
        colLeft
      } = this;
      // 获取最短的列
      image.height = imageWidth / imageData.width * imageData.height
      image.width = imageWidth
      let minIndex = waterfallColHeight.indexOf(Math.min.apply(null, waterfallColHeight))
      image.top = waterfallColHeight[minIndex]
      image.left = minIndex * (waterfallImageRight + imageWidth) + colLeft
      waterfallColHeight[minIndex] += image.height + waterfallImageBottom
      return image
    },
    rande(item) {
      return {
        top: `${item.top}px`,
        left: `${item.left}px`,
        // transform: `translate(${item.left}px,${item.top}px)`,
        background: item.color,
        width: `${item.width}px`,
        height: `${item.height}px`
      }
    },
    loadMore() {
      let array = new Array(10).fill(0)
      let imageList = array.map((item) => {
        let index = Math.floor(Math.random() * 9)
        return this.rankImage({
          color: suijicolour[index],
          height: wh[index].h,
          width: wh[index].w
        })
      })
      this.waterfallList = this.waterfallList.concat(imageList)
    }
  }
}
</script>

<style scoped>
.waterfall-list-container {
  width: 100%;
  position: relative;
}

.waterfall-list-item {
  position: absolute;
}
</style>
